<template>
  <div class="goods-container">

    <bread></bread>

    <!-- 卡片 -->
    <el-card class="box-card">
      <div class="searchBox">
        <el-input placeholder="请输入内容"
                  v-model="searchVal"
                  class="input-with-select">
          <el-button @click.native="getUsers"
                     slot="append"
                     icon="el-icon-search"></el-button>

        </el-input>
        <el-button type="primary"
                   @click="$router.push('/add')">添加</el-button>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="date"
                         label="日期"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址">
        </el-table-column>
      </el-table>
      <!-- 表格 -->
    </el-card>

  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      searchVal: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
<style lang='less'  scoped>
.goods-container {
  .box-card {
    .searchBox {
      margin: 15px 0 20px;
      display: flex;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }

    .el-pagination {
      text-align: left;
    }
  }
}
</style>
